<template>
  <!-- 员工个人档案 -->
  <div>
    
    <el-card>
        <el-button class="over" type="danger" @click="over(info._id)">办理离职</el-button>
      <div class="first">
        <div>
          <img :src="this.info.face" width="180px" alt="" />
        </div>
        <div class="right">
          <div>
            <span class="name">{{ this.info.name }}</span>
            {{ this.info.state }} | {{ this.info.nature }}
          </div>
          <div>部门：{{ this.info.stationId.name }}</div>
          <div>岗位：{{ this.info.organId.name }}</div>
          <div>入职时间：{{ this.info.entry | Day }}</div>
        </div>
        
      </div>
      
    </el-card>
    <el-menu
      default-active="1"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">基本信息</el-menu-item>
      <el-menu-item index="2">工资信息</el-menu-item>
      <el-menu-item index="3">社保信息</el-menu-item>
    </el-menu>
    <div v-if="key === '1'" class="kuai">
      <el-card>
        <div slot="header" class="clearfix">
          <span>个人信息</span>
        </div>
        <el-descriptions>
          <el-descriptions-item label="姓名">{{
            this.info.name
          }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{
            this.info.sex
          }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{
            this.info.phone
          }}</el-descriptions-item>

          <el-descriptions-item label="证件号">{{
            this.info.sid
          }}</el-descriptions-item>
          <el-descriptions-item label="出生日期"
            >1985-10-14</el-descriptions-item
          >
          <el-descriptions-item label="婚姻状况">已婚</el-descriptions-item>
          <el-descriptions-item label="政治面貌">党员</el-descriptions-item>
          <el-descriptions-item label="民族">汉族</el-descriptions-item>
          <el-descriptions-item label="籍贯">北京</el-descriptions-item>
          <el-descriptions-item label="户口所在地">北京</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card>
        <div slot="header" class="clearfix">
          <span>在职信息</span>
        </div>
        <el-descriptions>
          <el-descriptions-item label="工号">{{
            this.info._id
          }}</el-descriptions-item>
          <el-descriptions-item label="部门">{{
            this.info.stationId.name
          }}</el-descriptions-item>
          <el-descriptions-item label="岗位">{{
            this.info.organId.name
          }}</el-descriptions-item>

          <el-descriptions-item label="职务">PM</el-descriptions-item>
          <el-descriptions-item label="类型">部门负责人</el-descriptions-item>
          <el-descriptions-item label="兼职部门">无</el-descriptions-item>
          <el-descriptions-item label="兼职岗位">无</el-descriptions-item>
          <el-descriptions-item label="汇报上级">{{
            this.info.stationId.leader
          }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card>
        <div slot="header" class="clearfix">
          <span>员工状态</span>
        </div>
        <el-descriptions>
          <el-descriptions-item label="工作性质">{{this.info.nature}}</el-descriptions-item>
          <el-descriptions-item label="人员状态">{{this.info.state}}</el-descriptions-item>
          <el-descriptions-item label="入职日期">{{this.info.entry | Day}}</el-descriptions-item>
          <el-descriptions-item label="试用期">{{this.info.try}}</el-descriptions-item>
          <el-descriptions-item label="转正日期">{{this.info.formalTime | Day}}</el-descriptions-item>
          <el-descriptions-item label="司龄">{{2023-this.info.entry.split("-")[0]}}年</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
    <div v-if="key === '2'" class="kuai">
      <el-card>
        <div slot="header" class="clearfix">
          <span>工资卡信息</span>
        </div>
        <el-descriptions>
          <el-descriptions-item label="工资卡号">621534030180****172</el-descriptions-item>
          <el-descriptions-item label="开户行">中国建设银行</el-descriptions-item>
          <el-descriptions-item label="银行名称">中国建设银行</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card>
        <div slot="header" class="clearfix">
          <span>工资详情</span>
        </div>
        <el-descriptions>
          <el-descriptions-item label="基本工资">{{this.info.basic}}</el-descriptions-item>
          <el-descriptions-item label="岗位工资">{{this.info.post}}</el-descriptions-item>
          <el-descriptions-item label="职务工资">{{this.info.dut}}</el-descriptions-item>
          <el-descriptions-item label="司龄工资">1000</el-descriptions-item>
          <el-descriptions-item label="技能工资">500</el-descriptions-item>
          <el-descriptions-item label="全勤奖">200</el-descriptions-item>
          <el-descriptions-item label="奖金">0</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
    <div v-if="key === '3'" class="kuai">
      <el-card>
        <div slot="header" class="clearfix">
          <span>社保信息</span>
        </div>
         <el-descriptions>
          <el-descriptions-item label="社保账号">{{this.info.sid}}</el-descriptions-item>
          <el-descriptions-item label="起始缴纳日期">{{this.info.entry}}</el-descriptions-item>
          <el-descriptions-item label="参保方案">社保方案一</el-descriptions-item>
          <el-descriptions-item label="社保基数">8000</el-descriptions-item>
          <el-descriptions-item label="参保状态">已参保</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card>
        <div slot="header" class="clearfix">
          <span>公积金信息</span>
        </div>
         <el-descriptions>
          <el-descriptions-item label="公积金账号">{{this.info.sid}}</el-descriptions-item>
          <el-descriptions-item label="起始缴纳日期">{{this.info.entry}}</el-descriptions-item>
          <el-descriptions-item label="参保方案">公积金方案一</el-descriptions-item>
          <el-descriptions-item label="公积金基数">8000</el-descriptions-item>
          <el-descriptions-item label="参保状态">已参保</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <!-- <el-card>
        <div slot="header" class="clearfix">
          <span>缴纳记录</span>
        </div>
      </el-card> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "VueSalarysysRecord",

  data() {
    return {
      info: {
        organId: "",
        stationId: "",
      },
      key: "1",
    };
  },

  mounted() {
    this.getData(this.$route.query.id);
  },

  methods: {
    async getData(id) {
      let { data: data } = await this.$axios.get(
        "/organ/getConverted?id=" + id
      );
      console.log(data);
      this.info = data.data[0];
      console.log(this.info);
    },
    handleSelect(key) {
      console.log(key);
      this.key = key;
    },
    over(id){
        // console.log(id,'12536');
        this.$router.push({path:'/home/outgoing',query:{id}})
    }
  },
};
</script>

<style lang="scss" scoped>
.name {
  font-size: 25px;
  font-weight: bold;
}
.kuai {
  margin-top: 20px;
}
.kuai .el-card {
  margin-bottom: 20px;
}
.first {
  width: 100%;
  display: flex;
}
.first .right {
  padding-left: 20px;
}
.first .right div {
  padding-bottom: 25px;
}
.over{
    float: right;
    margin-bottom: 20px;
}
</style>